<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">

    function BoilingVerdict(props) {
        if (props.celsius >= 100) {
            return <p>水会烧开</p>;
        }
        return <p>水不会烧开</p>;
    }


    class Calculator extends React.Component {
        constructor(props) {
            super(props);
            this.state = {temperature: ''};
        }

        handleChange = (e) => {
            this.setState({temperature: e.target.value});
        }

        render() {
            let temperature = this.state.temperature;
            return (
                <div>
                    <p>输入一个摄氏温度</p>
                    <input value={temperature} onChange={this.handleChange} />
                    <BoilingVerdict celsius={parseFloat(temperature)} />
                </div>
            );
        }
    }

    ReactDOM.render(
            <Calculator />,
            document.getElementById('example')
    );

</script>
</body>
</html>